<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*利用精灵图就是用背景图定位,注意点:1.坐标是从左上角出发 2.背景图往反方向移动,所以是负值*/
		.hong {
			padding-left: 30px;
			/* 红旗背景图定位 */
			background: url(images/sprites.png) no-repeat -2px -185px;
		}
		.xin {
			padding-left: 240px;
			border: 1px solid #000;
			width: 500px;
			height: 108px;
			line-height: 106px;
			/* 新人专区背景图定位 */
			background: url(images/sprites.png) no-repeat -2px -349px;
		}
	</style>
</head>
<body>
	<div class="hong">精灵图的本质是处理网页背景图像的一种技术</div>
    <div class="xin">可以有效减少服务器接受和请求的次数，提高页面的加载速度</div>
</body>
</html>
